@w-rate:~ "w-rate";
.@{w-rate} {
  position: relative;
  line-height: 12px;
  font-size: 20px;
  font-family: auto;
  display: inline-block;
  vertical-align: middle;
  > span + span {
    margin-left: 3px;
  }
  &-bg {
    color: #e9e9e9;
  }
  > span,
  &-bg {
    cursor: pointer;
    position: relative;
    display: inline-block;
  }
  &-hight {
    z-index: 3;
    line-height: 12px;
    position: absolute;
    transition: color 0.3s, width 0.3s;
    color: #e9e9e9;
    display: none;
  }
  .hover-on {
    cursor: pointer;
  }
  .star-on,
  .hover-on,
  .half-on {
    display: inline-block;
    color: #f5a623;
  }
  .half-on:not(.hover-on) {
    overflow: hidden;
    width: 50%;
  }
}
